<template>
  <div class="app-container">
    <el-form :model="queryParams" :inline="true" >
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜 索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重 置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="dataList" border>
      <el-table-column label="排名" align="center" width="100">
        <template #default="scope">
          <span>第{{scope.row.ranking}}名</span>
        </template>
      </el-table-column>
      <el-table-column label="用户信息" align="center" width="400">
        <template #default="scope">
          <div class="common-flex-image" v-if="scope.row">
            <image-preview
              style="width: 80px; height: 80px"
              :src="scope.row.headPortrait">
            </image-preview>
            <div style="width: 180px; margin-left: 20px">
              <div style="margin-top: 10px;">昵称：{{scope.row.nickName}}</div>
              <div style="margin-top: 10px;">手机号：{{scope.row.phone}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="上组数量" align="center">
        <template #default="scope">
          <span style="color: red"> {{ scope.row.buyCount == null ? 0 : scope.row.buyCount }} </span>
        </template>
      </el-table-column>
      <el-table-column label="收到组数" align="center">
        <template #default="scope">
          <span style="color: red"> {{ scope.row.receiveCount == null ? 0 : scope.row.receiveCount }} </span>
        </template>
      </el-table-column>
      <el-table-column label="实付金额" align="center">
        <template #default="scope">
          <span style="color: red"> ￥ {{ scope.row.sumActualPayment }} </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination  v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                 v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
</template>
<script lang="ts" setup>
import { queryCollageUserInfo } from '@/api/workflow/cardCollage';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps({
  collageId: {
    type: String,
    default: undefined
  }
});

const loading = ref(false);
const showSearch = ref(true);
const total = ref(0);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  collageId: props.collageId,
  phone: ''
});
const dataList = ref([]);

const handleQuery = () => {
  queryParams.pageNum = 1;
  queryParams.pageSize = 10;
  getList();
};

const resetQuery = () => {
  queryParams.pageNum = 1;
  queryParams.pageSize = 10;
  queryParams.phone = undefined;
  queryParams.nickName = undefined;
  handleQuery();
};

const getList = () => {
  loading.value = true;
  queryCollageUserInfo(queryParams).then(response => {
    dataList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};

watch(
  () => props.collageId,
    (newVal) => {
      queryParams.collageId = newVal;
      getList();
  },
  { immediate: true, deep: true }
);
</script>
